<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px" inline>
      <el-form-item label="账期">
        <el-date-picker value-format="yyyyMMdd" v-model="form.month" style="width: 200px" type="date" placeholder="请选择账期" :picker-options="endDateDisabled" :clearable="false"></el-date-picker>
      </el-form-item>
      <el-form-item label="区域">
        <dx-cascader :area_id.sync="form.areaId" ref="cascader" :clearable="false" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handle_search" style="margin-left: 10px">查询</el-button>
        <el-button type="success" @click="handle_export">导出</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName">
      <el-tab-pane label="项目型欠费" name="tab1" />
      <el-tab-pane label="用户欠费" name="tab2" />
      <el-tab-pane label="OCS欠费待分摊" name="tab3" />
    </el-tabs>

    <transition name="fade-transform" mode="out-in">
      <keep-alive>
        <component :is="activeName" :ref="activeName" :params="form"></component>
      </keep-alive>
    </transition>

  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { downLoadExcelParams } from "@/utils/zipdownload";
export default {
  components: {
    tab1: () => import("./components/tab1.vue"), //项目型欠费
    tab2: () => import("./components/tab2.vue"), //用户欠费
    tab3: () => import("./components/tab3.vue"), //OCS欠费待分摊
  },
  data() {
    return {
      form: {
        areaId: null,
        month: null,
      },
      activeName: "tab1",
      disabledTime: "",
      endDateDisabled: this.pickerDisabled(),
    };
  },
  watch: {
    activeName(val) {},
  },
  created() {
    this.getMaxMonth();
  },
  methods: {
    handle_search() {
      this.$refs[this.activeName].getList(this.form);
    },
    handle_export() {
      let fileName = "欠费账龄日报表";
      downLoadExcelParams("/receivable/export", { ...this.form }, fileName);
    },
    getMaxMonth() {
      $budgetAPI.getMaxAgeMonthDay({}, (res) => {
        this.form.month = res.content || this.dayjs().format("YYYYMMDD");
        this.disabledTime = res.content || this.dayjs().format("YYYYMMDD");
        this.handle_search();
      });
    },
    pickerDisabled() {
      return {
        disabledDate: (t) => {
          return this.dayjs(t).format("YYYYMMDD") > this.disabledTime;
        },
      };
    },
  },
};
</script>
